<template>
	<view class="content qa-content">
		<TopVue />
		<view class="qa-main">
			<YuyingVue :sayIng="true" :tipsWords="'按住下方语音按钮描述你的病症'" />
			<view class="msg-box">
				<view class="msg-list" v-for="(item,idx) in msgList">
					<view class="my-msg" v-if="item.problem">
						<view class="my-msg-panel">{{item.problem}}</view>
						<view class="iconfont c-danger">&#xe74b; 删除</view>
					</view>
					<view class="msg-type">
						<view class="msg-type-panel" v-if="item.sendLoading">
							思考中
							<span class="sendIng">.</span>
							<span class="sendIng">.</span>
							<span class="sendIng">.</span>
						</view>
						<view class="msg-type-panel" v-else-if="item.isTimeout">
							服务器繁忙
						</view>
						<view class="msg-type-panel" v-else>
							<!-- 思考完成 -->
						</view>
					</view>
					<!-- <div class="msg-process"></div> -->
					<view class="msg-answer">
						<view class="answer-panel">{{item.answer}}</view>

					</view>
				</view>

			</view>
			<view class="bottom-box">
				<view class="bottom-btn"><text class="iconfont">&#xe905;</text> 按住按钮语音输入</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import TopVue from '@/components/top.vue'
	import YuyingVue from '@/components/Yuying.vue'
	const msgList = ref([{
		problem: "",
		answer: "你好",
		sendLoading: false,
		isTimeout: false
	}, {
		problem: "你是谁",
		answer: "我是XXXX",
		sendLoading: false,
		isTimeout: false
	},])
</script>

<style lang="scss">
	.qa-content {
		.qa-main {
			padding: 0 20rpx;
			background-color: #F6F6F6;
			min-height: calc(100vh - 70rpx);
		}

		.msg-box {
			padding-bottom: 100rpx;

			.my-msg {
				text-align: right;
			}

			.msg-answer,
			.my-msg {
				font-size: 28rpx;
				font-weight: bold;
				color: #1E1E1E;
				padding: 10rpx 0rpx;
			}

			.answer-panel,
			.my-msg-panel {
				text-align: left;
				padding: 10rpx 20rpx;
				border-radius: 100rpx 0 100rpx 100rpx;
				max-width: 80%;
				display: inline-block;
			}

			.my-msg-panel {
				background: rgba(0, 122, 255, 0.2);
			}

			.answer-panel {
				background: #FFFFFF;
				border-radius: 0 100rpx 100rpx 100rpx;
				border: 1rpx solid rgba(16, 53, 151, 0.1);
			}

			.iconfont {
				font-weight: lighter;
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}

		.bottom-box {
			position: fixed;
			bottom: 0rpx;
			width: 100%;
			left: 0;
			padding: 0 20rpx 20rpx 20rpx;
			background-color: #F6F6F6;

			.bottom-btn {
				color: #fff;
				background-color: #2F65F3;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 80rpx;
				border-radius: 10rpx;
				.iconfont{
					margin-right: 10rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>